<template>
  <el-card class="search">
    <template #header>
      <el-menu :default-active="state.activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">销售额</el-menu-item>
        <el-menu-item index="2">访问量</el-menu-item>
      </el-menu>
      <div class="search-right">
        <!-- 按钮组 -->
        <el-radio-group v-model="state.time">
          <el-radio-button label="top">今日</el-radio-button>
          <el-radio-button label="right">本周</el-radio-button>
          <el-radio-button label="bottom">本月</el-radio-button>
          <el-radio-button label="left">今年</el-radio-button>
        </el-radio-group>
        <!-- 时间选择器 -->
        <el-date-picker v-model="state.time2" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="shortcuts" />
      </div>
    </template>
    <div class="search-content">
      <v-chart :option="getOption()" autoresize></v-chart>
      <div class="search-content-list">
        <div class="list-title"></div>
        <ul>
          <li v-for="(rank,index) in rankData"><span :class="{'list-no':index<3}">{{rank.no}}</span><span>{{rank.name}}</span><span>{{rank.count}}</span></li>
        </ul>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts">
export default {
  name:'middleView',
};
</script>

<script lang="ts" setup>

import { reactive,computed  } from 'vue';
import { useReportDataStore } from '@/stores/reportData';
const dataStore = useReportDataStore()
const orderFullYearAxis = computed(() => dataStore.reportData.orderFullYearAxis || [])
const orderFullYear = computed(() => dataStore.reportData.orderFullYear || [])
const userFullYearAxis = computed(() => dataStore.reportData.userFullYearAxis || [])
const userFullYear = computed(() => dataStore.reportData.userFullYear || [])
const orderRank = computed(() => dataStore.reportData.orderRank)
const userRank = computed(() => dataStore.reportData.userRank)
const rankData = computed(() => state.activeIndex === '1' ? orderRank.value : userRank.value)



const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '最近一月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

const state = reactive({
  activeIndex: '1',
  time: '本周',
  time2: '',
})

const handleSelect = (value: string) => {
  console.log('handleSelect');
  
  state.activeIndex = value
}


const getOption = () => {
  const text = state.activeIndex === '1' ? '销售趋势' : '访问量趋势'
  return {
    title: {
      text,
      textStyle: {
        fontSize: 14,
        color: '#333'
      },
      left: 10,
    },
    color: '#3398DB',
    // 直角坐标系内绘图网格
    grid: {
      left: 50,
      right: 50,
      top: 50,
      bottom: 50
    },
    tooltip: {
      // 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
      trigger: 'axis',
      // 指示器类型。
      axisPointer: {
        type: 'shadow' //阴影效果
      }
    },
    xAxis: {
      type: 'category',
      data: state.activeIndex === '1' ? orderFullYearAxis.value : userFullYearAxis.value,
      axisTick: {
        alignWithLabel: true,
      },
    },
    yAxis: {
      splitLine: {
        lineStyle: {
          type: 'dotted',
          color: '#eee'
        }
      }
    },
    series: [{
      type: 'bar',
      barWidth: '35%',
      data: state.activeIndex === '1' ? orderFullYear.value : userFullYear.value
    }],
  }
}

</script>

<style lang="scss" scoped>
.search {
  margin-top: 20px;
  :deep(.el-card__header) {
    position: relative;
    padding: 0 20px;
    .el-menu--horizontal {
      border: none;
    }
    .search-right {
      position: absolute;
      right: 20px;
      top: 14px;
      // height: 100%;
      display: flex;
      align-items: center;
      .el-date-editor {
        margin-left: 10px;
      }
    }
  }

  .search-content {
    height: 270px;
    display: flex;
    .echarts {
      flex: 5;
    }
    .search-content-list {
      flex: 2;
      .list-title {
        font-size: 14px;
        color: #333;
        margin: 20px 0 10px;
      }
      ul {
        list-style: none;
        padding: 0 10px 0 0;
        margin: 0;
        li {
          height: 26px;
          line-height: 26px;
          span {
            font-size: 12px;
            &:first-child {
              display: inline-block;
              width: 20px;
              height: 20px;
              line-height: 20px;
              text-align: center;
              margin-right:10px;
            }
            &.list-no {
              background-color: #000;
              border-radius: 50%;
              color:#fff;
            }
            &:last-child {
              float: right;
            }
          }
        }
      }
    }
  }
}
</style>